<h2>{{defaultConfig.name}}</h2>
<ng-container [ngSwitch]="editmode">
  <ng-template ngSwitchCase="list">
    <test-modal #viewModal titleName='Measurements Groups'></test-modal>
    <test-modal #viewModalDelete titleName='Deleting:' [customMessage]="['Deleting this Measurement Group will affect the following components','Deleting this Measurement Group will NOT affect any component. Safe delete']" [customMessageClass]="['alert alert-danger','alert alert-success']"
        [showValidation]="true" [textValidation]="'Delete'" [controlSize]="true" (validationClicked)="deleteMeasGroup($event)">
    </test-modal>
    <export-file-modal #exportFileModal [showValidation]="true" [exportType]="defaultConfig['slug']" [textValidation]="'Export'" titleName='Exporting:'></export-file-modal>
    <table-list #listTableComponent [typeComponent]="defaultConfig['slug']" [data]="data" [columns]="defaultConfig['table-columns']" [counterItems]="counterItems" [counterErrors]="counterErrors" [selectedArray]="selectedArray" [isRequesting]="isRequesting" [tableRole]="tableRole"
    [roleActions]="overrideRoleActions" (customClicked)="customActions($event)"></table-list>
  </ng-template>

  <ng-template ngSwitchDefault>
    <form [formGroup]="measgroupForm" class="form-horizontal" (ngSubmit)="editmode === 'create' ? saveMeasGroup() : updateMeasGroup()">
    <ng-container>
      <div class="row well well-sm">
        <h4 style="display:inline">
        <i class="glyphicon glyphicon-cog text-info"></i> {{ editmode | uppercase}}
      </h4>
      <div class="pull-right" style="margin-right: 20px">
        <div style="display:inline" tooltip='Submit' container=body><button class="btn btn-success" type="submit" [disabled]="!measgroupForm.valid"> <i class="glyphicon glyphicon-ok-circle"></i></button></div>
        <div style="display:inline" tooltip='Reset' container=body><button class="btn btn-warning" type="reset" [disabled]="!measgroupForm.dirty"><i class="glyphicon glyphicon-ban-circle"></i> </button></div>
        <div style="display:inline" tooltip='Cancel' container=body><button class="btn btn-danger" type="button" (click)="cancelEdit()"><i class="glyphicon glyphicon-remove-circle"></i></button></div>
      </div>
    </div>
  </ng-container>
  <div class="form-fixed-height">
    <div class="well well-sm">
      <span class="editsection">
        MeasurementGroup Settings
      </span>
      <div class="form-group" style="margin-top: 25px">
        <label class="control-label col-sm-2" for="ID">ID</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Unique identifier of Measurement Group"></i>
        <div class="col-sm-9">
          <input formControlName="ID" id="ID" [ngModel]="measgroupForm.value.ID"/>
          <control-messages [control]="measgroupForm.controls.ID"></control-messages>
        </div>
      </div>

      <div class="form-group">
        <label class="control-label col-sm-2" for="Measurements">Measurements</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="List of measurements ready to be attached on {{measgroupForm.controls.ID.value}}"></i>
        <div class="col-sm-9">
          <ss-multiselect-dropdown [options]="selectmeas" formControlName="Measurements" [texts]="myTexts" [settings]="mySettings" [ngModel]="measgroupForm.value.Measurements"></ss-multiselect-dropdown>
          <control-messages [control]="measgroupForm.controls.Measurements"></control-messages>
        </div>
      </div>
    </div>
    <div class="well well-sm">
      <span class="editsection">
        Extra Settings
      </span>
      <div class="form-group" style="margin-top: 25px">
        <label class="control-label col-sm-2" for="Description">Description</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Description of the SNMP Device"></i>
        <div class="col-sm-9">
          <textarea class="form-control" style="width: 50%" rows="2" formControlName="Description" id="Description" [ngModel]="measgroupForm.value.Description"> </textarea>
          <control-messages [control]="measgroupForm.controls.Description"></control-messages>
        </div>
      </div>
    </div>
  </div>
    </form>
  </ng-template>
</ng-container>
